function slider(option,callback=null) {
    let html = '<div class="slider" id="slider">\n' +
        '                        <div class="label">向右滑动验证</div>\n' +
        '                        <div class="track" id="track">\n' +
        '                            <div class="bg-green" id="bg-green"></div>\n' +
        '                        </div>\n' +
        '                        <div class="button" id="btn">\n' +
        '                            <div class="icon" id="icon"></div>\n' +
        '                            <div class="spinner" id="spinner"><img src="/static/icon/successchack.jpg"></div>\n' +
        '                        </div>\n' +
        '                    </div>\n'
    $(option.element).append(html);
    this.option = option

    var oBtn = $("#btn")
    var oSlider = $("#slider")
    var oTrack = $("#track")
    var oSpinner = $("#spinner")
    var oIcon = $("#icon")

    var flag = 1
    var startx = 0
    var chax = 0
    var maxx = 0
    var isstart = false

    if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
        oBtn.on('touchstart', function (e) {
            e.preventDefault();
            slider_start(e.touches[0].clientX)
        })
        oBtn.on('touchmove', function (e) {
            e.preventDefault();
            slider_move(e.touches[0].clientX)
        })
        oBtn.on('touchend', function (e) {
            e.preventDefault();
            slider_end()
        })
    } else {
        oBtn.mousedown(function (e) {
            slider_start(e.clientX)
            isstart = true
        })
        $(document).mousemove(function (e) {
            if (isstart == true) {
                slider_move(e.clientX)
            }
        })
        $(document).mouseup(function () {
            if (isstart == true) {
                slider_end()
                isstart = false
            }
        })
    }

    function slider_start(e) {
        maxx = oSlider.width() - oBtn.width()
        if (flag == 1) {
            startx = e;
            oBtn.removeClass("button-on")
            oTrack.removeClass("track-on")
        }
    }

    function slider_move(e) {
        if (flag == 1) {
            let nowx = e;
            chax = nowx - startx;
            if (chax < 0) {
                chax = 0
            } else {
                if (chax >= maxx - 2) {
                    chax = maxx
                    oSpinner.css('display', 'flex')
                    oIcon.hide()
                } else {
                    oSpinner.css('display', 'none')
                    oIcon.show()
                }
            }
            oBtn.css('left', chax + 'px')
            oTrack.css('width', chax + 'px')
        }
    }

    function slider_end(e) {
        if (chax > maxx - 2) {
            var a = maxx
        } else {
            var a = 0
        }
        oBtn.css('left', a + 'px')
        oTrack.css('width', a + 'px')
        oBtn.addClass("button-on")
        oTrack.addClass("track-on")
        if (chax > maxx - 2) {
            flag = 0
            localStorage.setItem('slider', true)
            oIcon.hide()
            if(typeof callback == 'function'){
                callback()
            }
        }
    }

    this.init = function() {
        console.log('ad')
        flag = 1
        startx = 0
        chax = 0
        maxx = 0
        isstart = false

        localStorage.setItem('slider', false)
        oBtn.css('left', 0 + 'px')
        oTrack.css('width', 0 + 'px')
        oBtn.addClass("button-on")
        oTrack.addClass("track-on")
        oSpinner.css('display', 'none')
        oIcon.show()
    }
    this.init();
    return this
}


